﻿@page
@{ Layout = "_LayoutHome"; }

@section Styles{
  <style>
        .el-upload, .el-upload-dragger {
            width: 150px;
        }

        .el-button-group .el-dropdown {
            float: left;
            margin-top: -2.5px;
            margin-right: -1px;
        }

        .avatar {
            width: 158px;
            height: 158px;
            display: block;
        }
  </style>
}

<el-card>
    <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-63) + 'px' }">
        <div style="margin-right:18px;">
            <el-form v-on:submit.native.prevent ref="form" :model="form" status-icon label-width="140px">
                <el-form-item label="用户名">
                    <el-input v-model="form.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="displayName" :rules="[{ required: true, message: '请输入姓名' }]">
                    <el-input v-model="form.displayName"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile" :rules="[{ validator: utils.validateMobile, message: '字段必须是有效的手机号码' }]">
                    <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email" :rules="[
    { type: 'email', message: '请输入有效的电子邮箱' }
  ]">
                    <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload :action="uploadUrl"
                               :show-file-list="false"
                               :headers="{Authorization: 'Bearer ' + $token}"
                               list-type="picture-card"
                               :before-upload="uploadBefore"
                               :on-progress="uploadProgress"
                               :on-success="uploadSuccess"
                               :on-error="uploadError"
                               :on-remove="uploadRemove"
                               :multiple="false">
                        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
                        <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-divider></el-divider>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="btnSubmitClick">保 存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-scrollbar>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/js/home/profile.js" type="text/javascript"></script> }